<template>
	<view class="merchant-apply">
		<gyd-navbar back-color="#fff" :title="title"></gyd-navbar>

		<view class="earnest-money-desc" v-if="formData.status==2">{{formData.audit_opinion}}</view>

		<u-form class="form" labelPosition="left" :model="formData" :rules="rules" ref="formRef">
			<u-form-item class="form-item" label="店铺类型" labelWidth="120" prop="store_type">
				<u-radio-group v-model="formData.store_type">
					<u-radio v-for="(item,index) in storeList" :key="index" :name="item.id" :label="item.name"
						:disabled="item.disabled"></u-radio>
				</u-radio-group>
			</u-form-item>

			<u-form-item class="form-item" label="商户类型" labelWidth="120" prop="merchant_type">
				<u-radio-group v-model="formData.merchant_type">
					<u-radio v-for="(item,index) in list" :key="index" :name="item.id" :label="item.name"
						:disabled="item.disabled"></u-radio>
				</u-radio-group>
			</u-form-item>

			<u-form-item class="form-item" label="商户名称" label-width="120" prop="merchant_name">
				<u-input v-model="formData.merchant_name" border="bottom" placeholder="请输入商户名称"></u-input>
			</u-form-item>
			<u-form-item class="form-item" label="营业执照名称" label-width="120" prop="license_name">
				<u-input v-model="formData.license_name" border="bottom" placeholder="请输入营业执照名称"></u-input>
			</u-form-item>
			<u-form-item class="form-item" label="社会信用代码" label-width="120" prop="license_id">
				<u-input v-model="formData.license_id" border="bottom" placeholder="请输入社会信用代码"></u-input>
			</u-form-item>
			<u-form-item class="form-item" label="门头名称" label-width="120" prop="store_name">
				<u-input v-model="formData.store_name" border="bottom" placeholder="请输入门头名称"></u-input>
			</u-form-item>
			<u-form-item class="form-item" label="商户联系人" label-width="120" prop="contact_name">
				<u-input type="text" v-model="formData.contact_name" border="bottom" placeholder="请输入商户联系人"></u-input>
			</u-form-item>
			<u-form-item class="form-item" label="联系手机号" label-width="120" prop="contact_phone">
				<u-input type="number" v-model="formData.contact_phone" border="bottom"
					placeholder="请输入联系手机号"></u-input>
			</u-form-item>
			<u-form-item class="form-item" label="商户联系邮箱" label-width="120" prop="email">
				<u-input v-model="formData.email" border="bottom" placeholder="请输入商户联系邮箱"></u-input>
			</u-form-item>
			<u-form-item class="form-item" label="商户地址" label-width="120" prop="street_address">
				<u-input type="textarea" v-model="formData.street_address" border="bottom"
					placeholder="请输入商户地址"></u-input>
			</u-form-item>

			<u-form-item class="form-item" label="行业类目" labelWidth="120" prop="unity_category_id">
				<uni-data-select v-model="formData.unity_category_id" placeholder="请选择经营类目" :localdata="leimu"
					@change="leimuConfirm"></uni-data-select>
			</u-form-item>

			<u-form-item class="form-item" label="保证金" label-width="120" v-if="earnestData.earnest_switch">
				<u-input v-model="earnestData.earnest_money" disabled border="bottom" style="color: red;"></u-input>
			</u-form-item>

			<view v-if="earnestData.earnest_switch && earnestData.earnest_money_desc" class="earnest-money-desc">
				保证金说明：{{earnestData.earnest_money_desc}}
			</view>
		</u-form>

		<label class="protocol">
			<radio class="checked" @click="agree()" color="#125cd7" :checked="formData.checked"></radio>
			<text style="font-size: 28rpx;">同意</text>
			<text style="font-size: 28rpx;color:#125cd7"
				@click="pageRoute(`/userPages/agreement/agreement?type=merchant`)">《商户入驻协议》</text>
		</label>

		<view class="menu-group">
			<view><u-button type="success" @click="submit">提交</u-button></view>
		</view>
	</view>
</template>

<script setup>
	import request from '@/utils/request';
	import cache from '@/utils/cache';
	import util from '@/utils/util';
	import {
		ref,
		reactive,
		toRefs,
		inject,
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onPullDownRefresh,
		onReachBottom,
	} from '@dcloudio/uni-app';

	const state = reactive({
		title: '联盟商家',
		themeColor: cache.get('themeColor'),
		imgHost: util.requestUrl(),
		apply_id: 0,
		formData: {
			store_type: 1, // 店铺类型
			merchant_type: 2,
			contact_name: "", // 联系人
			contact_phone: "", // 手机号
			email: '', // 邮箱
			store_name: "", // 店铺名称
			unity_category_id: 0,
			merchant_name: '',
			license_id: '',
			license_name: '',
			street_address: '',
		},

		// 账户类型
		list: [{
				id: 1,
				name: '小微',
				disabled: true
			},
			{
				id: 2,
				name: '企业',
				disabled: false
			},
			{
				id: 3,
				name: '个体',
				disabled: false
			}
		],
		storeList: [{
				id: 1,
				name: '联盟商家',
				disabled: false
			},
			{
				id: 2,
				name: '加盟水站',
				disabled: false
			}
		],
		// 类目列表
		leimu: [],
		earnestData: {
			earnest_switch: true,
			earnest_money: 0,
			earnest_money_desc: ''
		},
	});

	const rules = ref([]);
	const formRef = ref();

	//在页面所有元素加载完成后执行（只执行一次）
	onLoad((opt) => {
		console.log('onLoad');
		if (opt.hasOwnProperty('id')) {
			console.log('传递参数', opt.id);
			state.apply_id = opt.id;
			getDetail();
		}
		getEarnestMoney();
		getLeimu();
	});

	//在页面由不可见变为可见时执行（只要页面显示都会执行）
	onShow(() => {
		console.log('onShow');
	})

	//在页面解析完成之后执行
	onReady(() => {
		console.log('onReady');
	})

	onPullDownRefresh(() => {
		console.log('下拉刷新');
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1000);
	})

	onReachBottom(() => {
		console.log('触底加载更多');
	})


	function getEarnestMoney() {
		request.get("merchant.merchant/getEarnestMoney", {})
			.then(res => {
				state.earnestData.earnest_money = Number(res.data.guarantee_money).toFixed(2) + '元';
				state.earnestData.earnest_switch = res.data.guarantee_switch === '1' ? true : false;
				state.earnestData.earnest_money_desc = res.data.earnest_money_desc;
			})
	}

	// 获取行业类目
	function getLeimu() {
		request.get("boxpay/getBusinessMcc", {})
			.then(res => {
				res.data.forEach(item => {
					state.leimu.push({
						value: item.code,
						text: item.name,
					})
				})
			});
	}

	function getDetail() {
		request.get('water.merchant/detail', {
			id: state.apply_id
		}).then(res => {
			console.log('申请详情', res);
			state.formData = res.data;
		})
	}

	// 确认类目
	function leimuConfirm(e) {
		console.log('确认类目', e);
		state.formData.unity_category_id = e;
	}

	// 同意协议
	function agree() {
		// 延迟后效果好一点
		setTimeout(() => {
			if (state.formData.checked) {
				state.formData.checked = false;
			} else {
				state.formData.checked = true;
			}
		}, 100)

	}

	function submit() {
		console.log('提交', state.formData);
		let check = checkData();
		if (!check) {
			return;
		}
		let url = "water.merchant/apply";
		if (state.apply_id && state.formData.id) {
			state.formData.status = 0; //状态改为待审核
			url = "water.merchant/save";
		}
		request.post(url, state.formData)
			.then(res => {
				console.log('申请结果', res);
				util.showTip(res.msg);
				if (res.code == 1) {
					setTimeout(() => {
						pageRoute(`/merchantPages/merchant/merchant`);
					}, 800);
				}
			})
	}

	// 验证数据
	function checkData() {
		if (!state.formData.store_type) {
			util.showTip("请选择店铺类型");
			return false;
		}
		if (!state.formData.merchant_type) {
			util.showTip("请选择商户类型");
			return false;
		}
		if (!state.formData.merchant_name) {
			util.showTip("请填写商户名称");
			return false;
		}
		if (!state.formData.license_name) {
			util.showTip("请填写营业执照注册名称");
			return false;
		}
		if (!state.formData.license_id) {
			util.showTip("请填写统一社会信用代码");
			return false;
		}
		if (!state.formData.store_name) {
			util.showTip("请填写门头名称");
			return false;
		}
		if (!state.formData.contact_name) {
			util.showTip("请填写商户联系人");
			return false;
		}
		if (!state.formData.contact_phone) {
			util.showTip("请填写联系手机号");
			return false;
		}
		if (!state.formData.email) {
			util.showTip("请填写商户联系邮箱");
			return false;
		}
		if (!state.formData.street_address) {
			util.showTip("请填写商户地址");
			return false;
		}
		if (!state.formData.unity_category_id) {
			util.showTip("请选择行业类目");
			return false;
		}
		if (!state.formData.checked) {
			util.showTip("请同意入驻协议");
			return false;
		}
		return true;
	}

	function pageRoute(url) {
		uni.navigateTo({
			url
		});
	}

	function pageTabRoute(url) {
		uni.reLaunch({
			url
		});
	}

	const {
		title,
		themeColor,
		imgHost,
		apply_id,
		formData,
		list,
		storeList,
		leimu,
		earnestData,
	} = toRefs(state);
</script>

<style lang="scss">
	page {
		background: #fff;
	}

	.merchant-apply {
		.form {
			margin-top: $m24;
			padding: 0 $m24;
			background-color: $u-bg-reverse-color;
			border-radius: 16rpx;

			.form-item {}

			.earnest-money-desc {
				color: red;
				font-size: 24rpx;
				text-align: center;
			}
		}

		.protocol {
			display: flex;
			align-items: center;
			padding: $m24 0;

			.checked {
				transform: scale(0.8);
			}

			.links {
				flex: 1;

				.u-link {
					display: inline-block;
				}
			}
		}

		.menu-group {
			display: flex;
			flex-direction: row;
			justify-content: space-around
		}
	}
</style>